<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="img/css.css">
</head>
<body>
<div id="wrap">
<ul>
<li>
<img src="img/1.png" alt="">
<a href="">
<div class="cove">
<p>pci1</p>
<p>Picture info 1</p>
</div>
</a>
</li>
<li>
<img src="img/2.png" alt="">
<a href="">
<div class="cove">
<p>pci2</p>
<p>Picture info 2</p>
</div>
</a>
</li>
<li>
<img src="img/3.png" alt="">
<a href="">
<div class="cove">
<p>pci3</p>
<p>Picture info 3</p>
</div>
</a>
</li>
<li>
<img src="img/4.png" alt="">
<a href="">
<div class="cove">
<p>pci4</p>
<p>Picture info 4</p>
</div>
</a>
</li>
<li>
<img src="img/5.png" alt="">
<a href="">
<div class="cove">
<p>pci5</p>
<p>Picture info 5</p>
</div>
</a>
</li>
<li>
<img src="img/6.png" alt="">
<a href="">
<div class="cove">
<p>pci6</p>
<p>Picture info 6</p>
</div>
</a>
</li>
</ul>
</div>
<script type="text/javascript">
		(function () {
			var $li =$('#wrap ul li');
			$li.hover(function (ev) {

				move.call(this , ev , true);

			},function (ev) {
				move.call(this , ev , false);
			});
			function move( ev , bool) {

				var top = $(this).offset().top;
				var bottom = top + $(this).height();
				var left = $(this).offset().left;
				var right = left + $(this).width();
				
				var x = ev.pageX,
					y = ev.pageY;

				var sT = Math.abs(y - top),
					sB = Math.abs(y - bottom),
					sL = Math.abs(x - left),
					sR = Math.abs(x - right);

				var a = Math.min( sT , sB , sL , sR );

				switch( a ){

					case sT:
						if (bool) {
							$(this).find('.cove').css({
								left:0,
								top:'-360px'
							}).animate({
								top:0
							},200);
						} else {
							$(this).find('.cove').stop(1,1).animate({
								top:'-360px'
							},200);
						}
					break;

					case sB:
						if ( bool ) {
							$(this).find('.cove').css({
								left:0,
								top:'360px'
							}).animate({
								top:0
							},200);							
						} else {
							$(this).find('.cove').stop(1,1).animate({
								top:'360px'
							},200);	
						}

					break;
					case sL:
						if ( bool ) {
							$(this).find('.cove').css({
								left:'-230px',
								top:0
							}).animate({
								left:0
							},200);							
						} else {
							$(this).find('.cove').stop(1,1).animate({
								left:'-230px'
							},200);	
						}

					break;
					case sR:
						if ( bool ) {
							$(this).find('.cove').css({
								left:'230px',
								top:0
							}).animate({
								left:0
							},200);							
						} else {
							$(this).find('.cove').stop(1,1).animate({
								left:'230px'
							},200);	
						}

					break;



				}

			};
		})();
	</script>
</body>
</html>